<template>
  <div class="app-container" style="margin-left: 20px,width: 100%">
    <div>
      <el-row style="margin-bottom: 10px">
        <el-col :span="4">
          <el-select
            ref="select"
            v-model="listQuery.handler_id"
            clearable
            filterable
            placeholder="请选择开发人员"
            class="group"
            @change="handleFilterHandler"
          >
            <el-option
              v-for="item in handler_list"
              :key="item.realname"
              :label="item.realname"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="20">
          <el-button style="margin-left: 1235px" type="info" icon="el-icon-message" @click="sendEMail" />
        </el-col>
      </el-row>
    </div>
    <el-table
      :key="tableKey"
      ref="bugNotClosedTable"
      v-loading="listLoading"
      :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
      :row-key="handleReserve"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column label="序号" width="70px" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="bug编号" align="center" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目-版本" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.version === ''">{{ row.project_name }}</span>
          <span v-else>{{ row.project_name }}-{{ row.version }}</span>
        </template>
      </el-table-column>
      <el-table-column
        type="expand"
        show-overflow-tooltip
        label="bug摘要"
        width="80px"
        header-align="center"
        align="left"
      >
        <template slot-scope="{ row }">
          <span>{{ row.summary }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="优先级" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.priority }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平台" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.platform }}</span>
        </template>
      </el-table-column>
      <el-table-column label="严重性" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.severity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分类" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.category_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报告日期" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.date_submitted }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后更新" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.last_updated }}</span>
        </template>
      </el-table-column>
      <el-table-column label="报告员" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.user_realname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="处理人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.handler_realname }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="false" label="处理人id" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.handler_id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="false" label="处理人" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上报类型" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.possible_value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标签" align="center">
        <template slot-scope="{ row }">
          <span> {{ row.tag_name === null ? "-" : row.tag_name }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_num"
      :limit.sync="listQuery.page_per"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { bugNotClosed, bugEMail } from '@/api/quality_visualization'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { Message } from 'element-ui'
import { handlerList } from '@/api/user'

export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },

  data() {
    return {
      tableKey: 0,
      list: [], // 默认为空会报错Cannot read property 'reduce' of null，默认数组
      total: 0,
      average_time: 0,
      edit: false,
      listLoading: true,
      listQuery: {
        handler_id: '',
        page_num: 1,
        page_per: 10
      },
      group_namelist: '',
      project_namelist: '',
      version_list: '',
      dateValue: '',
      showReviewer: true,
      sizeForms: {},
      user_list: [],
      user_mail_list: [],
      user: {
        handler_id: '',
        handler_realname: '',
        email: '',
        login_username: ''
      },
      handler_list: ''
    }
  },
  created() {
    this.getHandler()
    this.getList()
  },
  methods: {
    handleReserve(row) {
      return row.id
    },
    handleSelectionChange(val) {
      // 列表选择,val选中的表格行数据
      this.user_list = val
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.bugNotClosedTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.bugNotClosedTable.clearSelection()
      }
    },
    sendEMail() {
      if (this.user_list.length === 0) {
        Message.success('请勾选开发人员!')
        return
      }
      const login_username = this.$store.state.user.token
      this.user_list.forEach((item) => {
        // item 就是当日按循环到的对象,index索引，从0开始
        this.user.handler_id = item.handler_id
        this.user.handler_realname = item.handler_realname
        this.user.email = item.email
        this.user.login_username = login_username
        this.user_mail_list.push(this.deepCopy(this.user))
      })
      console.log(this.user_mail_list)
      bugEMail(this.user_mail_list)
        .then((response) => {
          Message.success(response.message)
          //  this.$router.go(0);
          this.toggleSelection()
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
        })
    },
    deepCopy(obj) {
      // 通过js的内置对象JSON来进行数组对象的深拷贝
      const _obj = JSON.stringify(obj)
      const objClone = JSON.parse(_obj)
      return objClone
    },
    getHandler() {
      handlerList()
        .then((res) => {
          this.handler_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    handleFilterHandler() {
      this.getList()
    },
    getList() {
      this.listLoading = true
      bugNotClosed(this.listQuery)
        .then((response) => {
          this.list = response.data.items
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.1 * 1000)
        })
        .catch((err) => {
          Message.error(err.msg || err.message || err.value)
        })
    }
  }
}
</script>
